import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import HeaderTool from "./components/HeaderTool";
import FilterSearch from "./components/FilterSearch";
import FilterContiner from "@/components/FilterContiner";
import TableList from "./components/TableList";
import Drawer from "@/components/Drawer";
import _ from "lodash";
import { message } from "antd";
import { useDispatch, useSelector } from "umi";
import DetailDrawForm from "./components/DetailDrawForm";
import DIalog from "@/components/DIalog";
import AddUser from "./components/AddUser";

function Staff() {
  const [current, setCurrent] = useState(1);
  const [dialogStatus, setDialogStatus] = useState(false);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(100);
  const [dataSource, setDataSource] = useState<any>([
    ...Array.from({ length: 100 }).map((item, index) => ({
      key: index,
      name: `李xx ${index}`,
      phone: "13800138000",
      level: "工业部",
      sex: "男",
      age: 20,
      entryTime: "2020-01-01",
      department: "工业部",
      workAge: 1,
      randomColumn1: `随机列1 ${index}`,
      randomColumn2: `随机列2 ${index}`,
      randomColumn3: `随机列3 ${index}`,
      randomColumn4: `随机列4 ${index}`,
      randomColumn5: `随机列5 ${index}`,
      randomColumn6: `随机列6 ${index}`,
      randomColumn8: `随机列8 ${index}`,
    })),
  ]);
  const dispatch = useDispatch();
  const addHandle = () => {
    // console.log("addHandle");
    setDialogStatus(true);
  };

  const BakData = useRef(_.cloneDeep(dataSource));

  //刷新列表
  const raload = (data = { key: Date.now() }) => {
    // console.log("raload");
    // console.log(BakData, "data");

    setCurrent(1);
    setPageSize(10);
    setDialogStatus(false);

    setDataSource([data, ...BakData.current]);
  };

  const refreshList = () => {
    // console.log(BakData, "BakData");
    setDataSource(_.cloneDeep(BakData.current));
    setCurrent(1);
    setPageSize(10);
  };

  const filterDataSource = (filter = {} as any) => {
    setCurrent(1);
    setPageSize(10);

    const newDataSource = dataSource.filter((item: any) => {
      //匹配搜索条件
      return Object.keys(filter).some((key) => {
        return item[key] === filter[key];
      });
    });
    setDataSource(newDataSource);
    console.log(newDataSource, "newDataSource");

    // console.log(filter, "filter");
  };

  //删除
  const deleteHandle = () => {
    // console.log(data, "data");
    setDataSource((state: any) =>
      state.filter((item: any) => item.key !== detailData?.key)
    );
    // dispatch({ type: "staff/setDetailData", payload: {} });
    dispatch({ type: "common/toggleDetail", payload: false });
    message.success("删除成功");
  };
  const onChangePageSize = (current: number, pageSize: number) => {
    console.log("onChangePageSize", current, pageSize);
    setCurrent(current);
    setPageSize(pageSize);
  };
  const detailData = useSelector((state: any) => state.staff.detailData);

  return (
    <div className="w-full h-full">
      <HeaderTool
        addHandle={addHandle}
        deleteHandle={deleteHandle}
        onChangePageSize={onChangePageSize}
        current={current}
        pageSize={pageSize}
        total={total}
      />
      <div className="w-full h-full flex">
        <FilterContiner>
          <FilterSearch
            filterDataSource={filterDataSource}
            raload={refreshList}
          />
        </FilterContiner>

        <div className="flex-1 h-full overflow-y-hidden">
          <TableList
            pageSize={pageSize}
            current={current}
            dataSource={dataSource}
            setDataSource={setDataSource}
          />
        </div>
      </div>
      <Drawer
        title={detailData?.title + " - " + detailData?.name}
        render={() => {
          const key = detailData?.col as keyof typeof DetailDrawForm;
          const Component = key ? DetailDrawForm[key] : undefined;
          if (!Component) return null; // 或者提示“暂不支持”
          // console.log(Component, "Component");
          return (
            <Component
              dataSource={dataSource}
              setDataSource={setDataSource}
              detailData={detailData}
            />
          );
        }}
        reloadList={(data: any) => {
          setDataSource(data);
        }}
        deleteHandle={deleteHandle}
      />

      <DIalog
        render={() => <AddUser raload={raload} />}
        title="新建员工"
        dialogStatus={dialogStatus}
        setDialogStatus={setDialogStatus}
        width={800}
      />
    </div>
  );
}

export default Staff;
